<template>
  <div class="invoice2_bos">
    <!-- 面包屑 -->
    <Header :headerData="headerData" />
    <div class="invoice1_nav">
      <div class="title">
        <span style="font-weight: bold">发票查询统计</span>
      </div>
      <div class="nav_bos">
        <div v-for="(item, index) in list1" :key="index" class="nav_list" @click="goPath(item.url)">
          <img v-if="index == 0" src="@/assets/invoice/navs1.svg" alt="" />
          <img v-if="index == 1" src="@/assets/invoice/navs2.svg" alt="" />
          <img v-if="index == 2" src="@/assets/invoice/navs3.svg" alt="" />
          <img v-if="index == 3" src="@/assets/invoice/navs4.svg" alt="" />
          <img v-if="index == 4" src="@/assets/invoice/navs5.svg" alt="" />
          <img v-if="index == 5" src="@/assets/invoice/navs6.svg" alt="" />
          <img v-if="index == 6" src="@/assets/invoice/navs7.svg" alt="" />
          <img v-if="index == 7" src="@/assets/invoice/navs8.svg" alt="" />
          <div class="nav_box">
            <div class="nav_title">{{ item.title }}</div>
            <div class="nav_info">{{ item.info }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="invoice1_foot">
      <div class="foot_bos">
        <img src="@/assets/home/dang.png" alt="" />
        <div>
          <div>版权所有：国家税务总局</div>
          <div style="margin-top: 6px">服务电话：12366</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";

const list1 = [
  {
    title: "全量发票查询",
    info: "查询纳税人开具、取得、经办的发票和海关缴款书信息",
    url: "/pages/a14",
  },
  {
    title: "开票数据统计及发票领用查询",
    info: "查询纳税人各种发票领用存及销项金额、税额等统计资料",
  },
  {
    title: "历史抵扣信息查询",
    info: "查询多个历史税款所属期抵扣统计确认信息",
  },
  {
    title: "未到勾选日期发票查询",
    info: "查询各类可抵扣勾选发票和海关缴款书信息",
  },
  {
    title: "进项税额转出情况查询",
    info: "查询应做进项转出的发票和海关缴款书及红字发票信息确认单信息",
  },
  {
    title: "批量导入导出进度查询",
    info: "查询批量数据处理任务的状态及结果",
  },
  {
    title: "汇总纳税分支机构开票数据查询",
    info: "对汇总缴纳增值税的总分机构汇总分支机构开票数据查询",
  },
  {
    title: "出口转内销发票查询",
    info: "查询各类可抵扣勾选出口转内销发票和海关缴款书信息",
  },
];

const headerData = ref<any>({
  title: "发票查询统计",
  type: 2,
  list: [{ title: "发票业务", url: "" }],
});

function goPath(url: any) {
  if (url) {
    router.push(url);
  }
}
</script>

<style lang="scss" scoped>
.invoice2_bos {
  .invoice1_nav {
    min-width: 1184px;
    padding: 24px;
    margin: 24px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 2px;

    .title {
      padding-bottom: 20px;
      font-size: 16px;
      color: #333;
      border-bottom: 1px solid #eeeeef;
    }

    .nav_bos {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      padding-top: 24px;

      .nav_list {
        display: flex;
        flex: 1 1 auto; /* 子元素可以伸缩 */
        min-width: 368px;
        max-width: 440px;
        padding: 24px;
        margin: 0;
        cursor: pointer;
        border: 1px solid #eeeeef;

        &:hover {
          box-shadow: 0 4px 10px rgb(17 31 138 / 16%);
          box-shadow: 0 4px 10px rgb(17 31 138 / 16%);
        }

        img {
          width: 48px;
          height: 48px;
          margin-top: 10px;
        }

        .nav_box {
          padding-left: 20px;

          .nav_title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
          }

          .nav_info {
            margin-top: 8px;
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
  }

  .invoice1_foot {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 30px;
    font-size: 14px;
    color: #abaeb0;

    .foot_bos {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 1184px;
      margin: 0 auto;
    }
  }
}
</style>
